@import '../../scss/variable';
@import '../../scss/mixin';
.headbanner{
  height: 300px;
  background: url('../../images/hosting_banner.jpg') no-repeat center center;
  h1{
    text-align: center;
    line-height: 300px;
    font-weight: 400;
    color: #fff;
  }
}
.host-navbar{
  padding: 25px 0;
  background-color: #F7F8FA;
  .host-navbar-inner{
    >li{
      width: 160px;
      padding-left: 80px;
      float: left;
      .submenu{
        li{
          padding-top: 8px;
          a{
            color: #777;
            &:hover{
              color: #444;
            }
          }
          &.active a{
            font-weight: 600;
            color: darken($theme, 10%)
          }
        }
      }
    }
  }
}
.featured{
  padding: 30px 0;
  &.bg-grey {
    background-color: #F7F8FA;
  }
}
.product-info{
  margin-bottom: 30px;
  h1{
    margin-bottom: 20px;
  }
  ol{
    list-style-type: disc;
    padding-left: 20px;
    li{
      margin-top: 10px;
    }
  }
}
.panel{
  .panel-header{
    a{
      display: block;
      padding: 8px 15px;
      line-height: 20px;
      color: rgba(0,0,0,.5);
      transition: all .2s ease-in-out;
      .fa-caret-right{
        transition: all .2s ease-in-out;
      }
      &:hover{
        background-color: #f7f7f7;
      }
      &.active{
        color: #333;
        .fa-caret-right{
          transform: rotate(90deg);
        }
      }
    }
  }
  .panel-content{
    display: none;
    &.expand{
      display: block;
    }
  }
}
.product-list-table{
  >thead>tr>th,
  >tbody>tr>td{
    text-align: center;
    font-size: 12px;
    &:first-child{
      width: 120px;
    }
  }
  >thead>tr>th{
    padding: 10px 0;
    color: #fff;
    background-color: #2C3B41;
  }
  >tbody>tr>td{
    padding: 12px 8px;
    border-bottom: 1px solid #ededed;
    border-left: 1px solid #ededed;
    border-right: 1px solid #ededed;
    &:first-child{
      background-color: #f2f4f4;
    }
  }
  .price-info{
    margin-bottom: 5px;
    .strong{
      font-size: 16px;
      font-weight: 600;
      color: $theme;
    }
  }
  .button{
    color: $theme;
    border-color: $theme;
    &:hover{
      background-color: $theme;
      color: #fff;
    }
  }
  .link{
    cursor: pointer;
    color: darken($theme, 8%)
  }
  .fa-close{
    color: #F44336
  }
  .fa-plus{
    color: #2196F3;
  }
  .fa-check{
    color: #4CAF50;
  }
}
.supplement{
  p{
    margin-top: 10px;
    .fa-close{
      color: #F44336
    }
    .fa-plus{
      color: #2196F3
    }
    .fa-check{
      color: #4CAF50
    }
  }
}